import { Select } from 'antd'
import { CSSProperties } from 'react'
import { IFornItem, IOption } from './interface'
const { Option } = Select;

export type logickey = 'or' | 'and'

interface ILogic extends IFornItem<string> {
  cls: string;
  datakey: string;
  style?: CSSProperties,
  logicOption: IOption[]
}

const logicLabelEn = {
  or: 'or',
  and: 'and',
}

const logicLabelCn = {
  or: '或',
  and: '与',
}

const logicValue = {
  or: '_or',
  and: '_and',
}

const defaultOption = [
  {
    label: logicLabelEn.and,
    value: 'and',
  },
  {
    label: logicLabelEn.or,
    value: 'or',
  },
];

export const getLogic = (type: logickey) => {
  return logicValue[type] ? logicValue[type] : type
}

/**
 * 逻辑符组件
 * **/
export const Logic = (props: ILogic) => {


  const cls = props.cls ? props.cls + '-logic' : '';
  const logicOption = props.logicOption ?? defaultOption;

  function handleChange(value: string) {
    props.onChange({
      [props.datakey]: value
    })
  };

  return <Select
    className={cls}
    placeholder={'请选择'}
    style={{
      minWidth: 80,
      ...props.style
    }}
    defaultValue={props.value ?? 'and'}
    onChange={handleChange}>
    {
      logicOption.map((item) => {
        return <Option key={item.value} value={item.value}>{item.label}</Option>
      })
    }
  </Select>
}